<template>
  <div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div>
              入库仓库：<a-select
                allowClear
                show-search
                option-filter-prop="children"
                style="width: 60%"
                :filter-option="filterOption"
                v-model="seachData.warehousingId"
              >
                <a-select-option
                  :value="item.warehouseId"
                  v-for="item in warehouse"
                  :key="item.warehouseId"
                >
                  {{ item.titleName }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="6">
            订单编号：
            <a-input
              :maxLength="128"
              style="width: 60%"
              v-model="seachData.applyCode"
            />
          </a-col>
          <a-col :span="6">
            商品sku：
            <a-input
              :maxLength="128"
              style="width: 60%"
              v-model="seachData.sku"
            />
          </a-col>
          <a-col :span="6" v-show="expand">
            产品标签条码：
            <a-input
              :maxLength="128"
              style="width: 60%"
              v-model="seachData.productTag"
            />
          </a-col>
          <a-col :span="6">
            <div v-show="!expand">
              <a-button type="primary" class="searchBtn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                style="margin: 0 10px"
                type="primary"
                class="searchBtn"
                @click="reset"
              >
                重置
              </a-button>
              <a
                :style="{ marginRight: '8px', fontSize: '14px' }"
                @click="expand = !expand"
              >
                {{ expand ? "折叠" : "展开" }}
                <a-icon :type="expand ? 'up' : 'down'" />
              </a></div
          ></a-col>
        </a-row>
        <a-row :gutter="24" style="margin-bottom: 15px" v-show="expand">
          <a-col :span="6" v-show="expand">
            <div>
              创建时间：
              <a-range-picker
                style="width: 60%"
                @change="onChange"
                v-model="upTime"
              >
                <a-icon
                  slot="suffixIcon"
                  style="color: #3eae7c"
                  type="calendar"
                />
              </a-range-picker>
            </div>
          </a-col>

          <a-col :span="6">
            预计到仓时间：
            <a-range-picker
              style="width: 60%"
              @change="onChangeHouse"
              v-model="houseTime"
            >
              <a-icon
                slot="suffixIcon"
                style="color: #3eae7c"
                type="calendar"
              />
            </a-range-picker>
          </a-col>
          <a-col :span="6">
            整柜柜号：
            <a-input
              :maxLength="128"
              style="width: 60%"
              v-model="seachData.cargotankNumber"
            />
          </a-col>
          <a-col :span="6">
            快递单号：
            <a-input
              :maxLength="128"
              style="width: 60%"
              v-model="seachData.expressNo"
            />
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-bottom: 15px" v-show="expand">
          <a-col :span="6">
            <div v-show="expand">
              <a-button type="primary" class="searchBtn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                style="margin: 0 10px"
                type="primary"
                class="searchBtn"
                @click="reset"
              >
                重置
              </a-button>
              <a
                :style="{ marginRight: '8px', fontSize: '14px' }"
                @click="expand = !expand"
              >
                {{ expand ? "折叠" : "展开" }}
                <a-icon :type="expand ? 'up' : 'down'" />
              </a></div
          ></a-col>
        </a-row>
      </div>
    </div>
    <div class="btn" style="display: flex; margin-top: 5px">
      <div class="news">
        <a-button
          style="margin-right: 15px"
          type="primary"
          class="blueBtn"
          @click="showModal"
        >
          新建入库申请
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <div class="spin-content">
        <a-tabs default-active-key="0" @change="callback">
          <a-tab-pane key="0">
            <span slot="tab">
              <a-badge
                :count="typeCountNum === null ? 0 : typeCountNum.submitCount"
                :offset="[15, 0]"
                >待提交
              </a-badge>
            </span>

            <SKUListTable
              keys="待提交"
              v-if="tabKeys === '0'"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
          <a-tab-pane key="10" force-render>
            <span slot="tab">
              <a-badge
                :count="typeCountNum === null ? 0 : typeCountNum.examineCount"
                :offset="[15, 0]"
                >待审核
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '10'"
              keys="待审核"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
          <a-tab-pane key="20">
            <span slot="tab">
              <a-badge
                :count="typeCountNum === null ? 0 : typeCountNum.fbaCount"
                :offset="[15, 0]"
                >待发头程
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '20'"
              keys="待发头程"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
          <a-tab-pane key="60">
            <span slot="tab">
              <a-badge
                :count="
                  typeCountNum === null ? 0 : typeCountNum.depoReceiveCount
                "
                :offset="[15, 0]"
                >在途中
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '60'"
              keys="在途中"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
          <a-tab-pane key="100">
            <span slot="tab">
              <a-badge
                :count="typeCountNum === null ? 0 : typeCountNum.receivedCount"
                :offset="[15, 0]"
                >已接收
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '100'"
              keys="已接收"
              :tabData="getTabList"
              :tabKeys="tabKeys"
              :typeCount="typeCount"
            />
          </a-tab-pane>
          <a-tab-pane key="80">
            <span slot="tab">
              <a-badge
                :count="
                  typeCountNum === null ? 0 : typeCountNum.receivedPositionCount
                "
                :offset="[15, 0]"
                >已入库
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '80'"
              keys="已入库"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
          <a-tab-pane key="40">
            <span slot="tab">
              <a-badge
                :count="typeCountNum === null ? 0 : typeCountNum.failCount"
                :offset="[15, 0]"
                >审核不通过
              </a-badge>
            </span>
            <SKUListTable
              v-if="tabKeys === '40'"
              keys="审核不通过"
              :tabData="getTabList"
              :typeCount="typeCount"
              :tabKeys="tabKeys"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 35px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :current="seachData.current"
          :total="total"
          @change="onChangeView"
        />
      </a-config-provider>
    </div>
    <!-- 新增模板弹出层 -->
    <AddOrderModal
      :tabData="getTabList"
      :tabKeys="tabKeys"
      :typeCount="typeCount"
    />
    <!-- 编辑详情以及代发头程模板弹出层 -->
    <InOrderModal
      :tabData="getTabList"
      :tabKeys="tabKeys"
      :typeCount="typeCount"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  instock_tabList,
  SKU_TypeCount,
} from "@/apis/clientSide/OrderManage/Instock.js";
import SKUListTable from "@/components/clientSide/OrderManage/Instock/SKUListTable.vue";
import AddOrderModal from "@/components/clientSide/OrderManage/Instock/ADDInOrdersModal";
import InOrderModal from "@/components/clientSide/OrderManage/Instock/InOrdersModal";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
export default {
  components: {
    AddOrderModal,
    SKUListTable,
    InOrderModal,
  },
  created() {
    // 获取表格数据
    this.getTabList(this.tabKeys);
  },
  mounted() {
    this.$bus.$off("sava");
    this.$bus.$on("sava", () => {
      this.getTabList(this.tabKeys);
    });
  },
  data() {
    return {
      spinning: false,
      expand: false,
      upTime: null,
      houseTime: null,
      searchArr: [],
      locale,
      //分页数据
      total: 1,
      tabKeys: "0",
      tabData: [],

      //类型气泡数量
      typeCountNum: {},
      seachData: {
        current: 1,
        size: 10,
        createStartDate: "",
        createendtDate: "",
        //入库编号
        applyCode: "",
        houseEndDate: "",
        houseStartDate: "",
        sku: "",
        productTag: "",
        received: "",
        cargotankNumber: "",
        expressNo: "",
        warehousingId: undefined,
      },
    };
  },
  methods: {
    //下拉框过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //重置按钮
    reset() {
      let current = this.seachData.current;
      let size = this.seachData.size;
      for (let key in this.seachData) {
        this.seachData[key] = "";
      }
      this.seachData.current = current;
      this.seachData.size = size;
      this.searchArr = [];
      this.upTime = null;
      this.houseTime = null;
      this.getTabList(this.tabKeys);
    },

    //选项卡改变
    callback(key) {
      this.seachData.current = 1;
      this.tabKeys = key;

      this.getTabList(key);
    },
    //搜索按钮
    async searchBtn() {
      this.getTabList(this.tabKeys);
    },
    //  更新日期改变
    onChange(date, dateString) {
      date;
      this.seachData.createStartDate = dateString[0];
      this.seachData.createendtDate = dateString[1];
    },
    //  预计到仓配送日期改变
    onChangeHouse(date, dateString) {
      date;
      this.seachData.houseStartDate = dateString[0];
      this.seachData.houseEndDate = dateString[1];
    },
    //页码变更
    showChange(size, current) {
      this.seachData.size = current;
      this.seachData.current = size;
      this.getTabList(this.tabKeys);
    },
    //分页改变
    onChangeView(pageNumber) {
      this.seachData.current = pageNumber;
      this.getTabList(this.tabKeys);
    },
    //显示模态框
    showModal() {
      setTimeout(() => {
        this.$bus.$emit("addOrder");
      }, 1);
    },
    //封装获取表格数据
    async getTabList(applyState = "0") {
      this.spinning = true;
      //深拷贝一个查询条件，需要处理搜索条件
      let searchObj = JSON.parse(JSON.stringify(this.seachData));
      searchObj.applyState = applyState == "100" ? null : applyState;
      searchObj.received = applyState == "100" ? 1 : null;
      let { code, responseBody } = await instock_tabList(searchObj);
      if (code === "200") {
        let { records } = responseBody;
        console.log(records);
        this.total = Number(responseBody.total);
        //利用状态机管理表格数据
        this.$store.commit("tabListData", records);
        //更新红点气泡
        this.typeCount();
        this.spinning = false;
      }
    },
    //更新红点气泡数据
    async typeCount() {
      let { code, responseBody } = await SKU_TypeCount();
      if (code === "200") {
        this.typeCountNum = responseBody === null ? null : responseBody;
      }
    },
  },
  computed: { ...mapState(["warehouse"]) },
};
</script>

<style lang="less" scoped>
#components-form-demo-advanced-search {
  padding: 5px;
}

/deep/.blueBtn {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.blueBtn:focus,
.blueBtn:hover {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
